<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contact Healthcare System</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(document).ready(function() {
		
		$("#thanksmsg").hide();
		
		$("#submitbtn").click(function(){
			$("#thanksmsg").show();
			$("#ContactUs").hide();
		});		
});
</script>
</head>

<body id="landingBody">
<jsp:include page="Header.jsp" />

<div id="bodyPan" style="padding-top:40px;height:580px;">
  <div id="middlePan" style="margin-bottom:50px;">
		<div id="middlebodyPan">
		<div id="ContactUs">
		<h1>Contact us </h1>
    	    <form id="contactform" name="contact" method="post" action="#" style="padding-bottom:20px;">
		      <p class="note"><span class="req">*</span> Asterisk fields are required</p>
		      <div class="row">
		        <label for="name">Your Name <span class="req">*</span></label>
		        <input type="text" name="name" id="name" class="txt" tabindex="1" placeholder="John Mayer" pattern="[A-Za-z]+" title="Alphabets only" required autofocus>
		      </div>
		      
		      <div class="row">
		        <label for="email">E-mail Address <span class="req">*</span></label>
		        <input type="email" name="email" id="email" class="txt" tabindex="2" placeholder="address@domain.com" pattern="[a-zA-Z0-9_.]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,4}" required>
		      </div>
		      
		      <div class="row">
		        <label for="subject">Subject <span class="req">*</span></label>
		        <input type="text" name="subject" id="subject" class="txt" tabindex="3" placeholder="Query/Message" maxlength="50" required>
		      </div>
		      
		      <div class="row">
		        <label for="message">Message <span class="req">*</span></label>
		        <textarea name="message" id="message" class="txtarea" tabindex="4" maxlength="150" placeholder="Enter your brief query or comment here ..." required></textarea>
		      </div>
		      
		      <div class="center">
		        <input type="button" id="submitbtn" name="submitbtn" tabindex="5" value="Send Message">
		      </div>
		    </form>
		    </div>
		    <div id="thanksmsg" style="padding: 20px;text-align: center;border: 5px solid green;font-weight: bold;">
		    Thank you for your feedback. We will contact you shortly.
		    </div>
		    
		</div>
	</div>
</div>

<jsp:include page="Footer.jsp" />
</body>
</html>